# 从time模块导入sleep函数，用于程序强制暂停（等待页面加载、操作间隔）
from time import sleep
# 从selenium库导入webdriver模块，用于创建浏览器驱动、控制浏览器
from selenium import webdriver
# 从selenium导入ActionChains类，核心用于模拟鼠标拖拽、右键、双击等复杂操作
from selenium.webdriver import ActionChains
# 导入By类（补充：适配新版selenium，替代旧版find_element_by_*方法）
from selenium.webdriver.common.by import By

# 1. 初始化并打开Chrome浏览器
# executable_path：指定ChromeDriver驱动的本地绝对路径（适配selenium3及以下版本）
# 驱动作用：建立Python代码与Chrome浏览器的通信桥梁，实现对浏览器的控制
driver = webdriver.Chrome(executable_path='D:/chrome_driver/chromedriver.exe')
# 注释：selenium4及以上版本推荐写法（无需手动指定驱动路径）
# 需提前安装 webdriver-manager 库（pip install webdriver-manager），自动匹配浏览器版本下载驱动
# driver = webdriver.Chrome() # 创建Chrome浏览器对象，后续通过该对象执行所有操作

# 2. 访问本地目标页面（拖拽操作测试页面drop.html）
# 定义本地文件URL：使用r前缀表示原始字符串，避免路径中的反斜杠被解析为转义字符
# 本地文件URL格式：file://+文件绝对路径（此处原代码直接写本地路径，部分浏览器可能不兼容，建议优化为标准格式）
url = r"D:\pythonproject\UI自动化\drop.html"
# get()方法：接收URL（支持http/https网络地址或file://本地文件地址），让浏览器加载并显示页面
driver.get(url)
# 优化建议（避免本地路径兼容性问题）：
# import os
# url = "file://" + os.path.abspath(r"D:\pythonproject\UI自动化\drop.html")
# driver.get(url)

# 放大浏览器窗口（可选，注释状态，取消注释可启用）
# maximize_window()：将窗口调整为屏幕最大尺寸，避免拖拽时元素超出可视范围
# driver.maximize_window()

# 3. 初始化鼠标操作对象
# ActionChains(driver)：创建鼠标/键盘操作链对象，拖拽等复杂操作需通过该对象实现
# 特点：支持链式调用，所有操作需通过perform()方法触发执行
action = ActionChains(driver)

# 4. 核心操作1：元素拖拽（将源元素拖拽到目标元素位置）
# 步骤1：定位源元素（拖拽的起始元素）
# 旧版定位方式（已弃用，不推荐）：source = driver.find_element_by_css_selector("#div1")
# 新版定位方式（selenium4+推荐，兼容所有版本）：通过CSS_SELECTOR定位id为"div1"的元素
source = driver.find_element(By.CSS_SELECTOR, "#div1")

# 步骤2：定位目标元素（拖拽的结束位置元素）
# 旧版定位方式（已弃用）：target = driver.find_element_by_css_selector("#div2")
# 新版定位方式：通过CSS_SELECTOR定位id为"div2"的元素
target = driver.find_element(By.CSS_SELECTOR, "#div2")

# 暂停3秒：等待页面元素完全加载（本地页面加载快，可适当缩短，网络页面建议延长）
sleep(3)

# 步骤3：执行元素到元素的拖拽操作
# drag_and_drop(source, target)：模拟鼠标拖拽流程：按住源元素 → 移动到目标元素中心点 → 释放鼠标
# perform()：触发执行所有存储的操作（ActionChains的核心，无此方法则拖拽不生效）
action.drag_and_drop(source, target).perform()

# 5. 核心操作2：按坐标偏移量拖拽（从源元素位置偏移指定像素）
# 暂停3秒：等待上一次拖拽操作完成，避免两次拖拽冲突
sleep(3)

# 执行坐标偏移拖拽操作
# drag_and_drop_by_offset(source, xoffset, yoffset)：按像素偏移量拖拽
# 参数说明：
#   source：拖拽的起始元素（此处复用之前定位的#div1元素）
#   xoffset：水平偏移量（正数→向右，负数→向左，单位：像素）
#   yoffset：垂直偏移量（正数→向下，负数→向上，单位：像素）
# 此处表示：从source元素的当前位置，向右偏移300像素、向下偏移300像素后释放鼠标
action.drag_and_drop_by_offset(source, xoffset=300, yoffset=300).perform()

# （可选）保持页面状态便于观察效果，最后关闭浏览器
# sleep(5)  # 延长暂停时间，观察拖拽结果
# driver.quit()  # 关闭浏览器并释放资源